<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="合伙人编号">
                  <el-input
                    v-model="searchModel.partnerId"
                    placeholder="合伙人编号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="提现状态">
                  <el-radio-group
                    @change="search"
                    v-model="searchModel.status"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="wait_pay">待打款</el-radio-button>
                    <el-radio-button label="payed">已打款</el-radio-button>
                    <el-radio-button label="dealing">提现中</el-radio-button>
                    <el-radio-button label="failed">已取消</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="提现支付宝账号">
                  <el-input
                    v-model="searchModel.alipayAccount"
                    placeholder="提现支付宝账号"
                  ></el-input>
                </el-form-item>
                <el-form-item class="operations">
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    type="default"
                    @click="reset"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
        <div>
          <el-card
            shadow="never"
            v-loading="sumLoading"
            class="m-b-8"
          >
            <div class="box">
              <div class="item">
                <span>总金额(+)</span><span class="text-bold-18 text-success">{{sumData.totalAmount}}元</span>
              </div>
              <div class="item">
                <span>已打款金额</span><span class="text-bold-18 text-success">{{sumData.payedAmount}}元</span>
              </div>
              <div class="item">
                <span>待打款金额</span><span class="text-bold-18 text-success">{{sumData.waitPayAmount}}元</span>
              </div>
            </div>
          </el-card>
        </div>
        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="small"
              style="width: 100%;"
            >

            <el-table-column label="提现时间">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.createTime }}
                  </div>
                </template>
              </el-table-column>
              
              <el-table-column label="合伙人编号">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.partnerId }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="alipayAccount"
                label="提现支付宝账号"
              >
              </el-table-column>
              <el-table-column label="提现金额">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    ¥ {{ scope.row.transferMoney / 100 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="提现前余额">
                <template slot-scope="scope">
                  <div>
                    ¥ {{ scope.row.beforeAmount / 100 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="提现后余额">
                <template slot-scope="scope">
                  <div>
                    ¥ {{ scope.row.afterAmount / 100 }}
                  </div>
                </template>
              </el-table-column>
               <el-table-column label="打款方式">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.isOffline === 0"
                  >线上</span>
                  <span
                    v-if="scope.row.isOffline === 1"
                  >线下</span>
                </template>
              </el-table-column>
              <el-table-column label="提现状态">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.status === 'payed'"
                    class="text-success"
                  >已打款</span>
                  <span
                    v-if="scope.row.status === 'wait_pay'"
                    class="text-info"
                  >待打款</span>
                  <span
                    v-if="scope.row.status === 'dealing'"
                    class="text-info"
                  >提现中</span>
                  <span
                    v-if="scope.row.status === 'failed'"
                    class="text-danger"
                  >已取消</span>
                </template>
              </el-table-column>
            
              <el-table-column label="完成时间">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.endTime }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div>
                    <div v-if="scope.row.status === 'wait_pay'">
                       <el-popover
                        :ref="'cancel' + scope.row.id"
                        placement="top"
                        width="200"
                        trigger="click"
                      >
                        <p>
                          确定取消转账?
                        </p>

                        <div style="text-align: right; margin: 0">
                          <el-button
                            size="mini"
                            type="text"
                            @click="
                              $refs['cancel' + scope.row.id].doClose()
                            "
                            >取消
                          </el-button>
                          <el-button
                            :loading="opLoading"
                            type="primary"
                            size="mini"
                            @click="
                              cancelTrans(
                                scope.row.id
                              )
                            "
                            >确定
                          </el-button>
                        </div>
                        <el-button slot="reference" type="text"  size="mini">
                          取消转账
                        </el-button>
                      </el-popover>
                    </div>

                  </div>
                </template>
              </el-table-column>

            </el-table>
            <div class="paging-wrap">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="searchModel.count"
              >
              </el-pagination>
            </div>
          </el-card>
        </div>

      </div>
    </div>
  </div>
</template>


<script>
import { searchPartnerWithdrawRecord, cancelPartnerWithdrawRecord, sumPartnerWithdrawRecordBatchStat  } from "@/api/business";

const defaultModel = {
  status: "",
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      curData: null,
      sumData: {}, //合计数据
      sumLoading: false,
      opLoading: false,
    };
  },
  components: {},
  methods: {
    cancelTrans(id) {
      this.opLoading = true;
      cancelPartnerWithdrawRecord({id}).then(resp=> {
        if (resp.success) {
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 2500,
          });
        }
        this.$refs["cancel" + id].doClose();
        this.opLoading = false;
        this.init();
      })
    },
    search() {
      this.getList(1);
      this.sumPartnerWithdrawRecordBatchStat();
    },
    sumPartnerWithdrawRecordBatchStat() {
      this.sumLoading = true;
      let searchModel = _.cloneDeep(this.searchModel);
      sumPartnerWithdrawRecordBatchStat(this.compileSearchModel(searchModel))
        .then((data) => {
          this.sumData = data.data;
          this.sumLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }

      let searchModel = _.cloneDeep(this.searchModel);
      searchPartnerWithdrawRecord(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo;
          self.searchModel.count = data.count;
          self.searchModel.pageSize = data.pageSize;
          self.list = data.data;
          self.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;

      return searchModel;
    },
    //修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    //修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },
    init() {
      this.search();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  .item {
    display: flex;
    flex-direction: column;
    margin-right: 200px;
    justify-content: space-between;
    align-items: flex-start;
    height: 65px;
    background: #eeeeee;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
